<script setup lang="ts">
import { useRouter } from 'vue-router';
import type { GoodsList } from '@/types/index.ts';

const $router = useRouter();
const props = defineProps<{
  goodsList: GoodsList[];
  shopName: string | undefined;
  supplierId?: string;
  afterPhone?: string;
}>();
const onImageClick = (item: GoodsList) => {
  $router.push({
    path: `/goodsDetails/${item.goodsId}`,
  });
};
const carPop = ref(false);
const joinCarData = ref({});
const onJoinCarClick = (props: GoodsList) => {
  carPop.value = true;
  joinCarData.value = props;
};
const onGoStoreClick = () => {
  $router.push({
    path: '/store',
    query: {
      supplierId: props.supplierId,
    },
  });
};
</script>

<template>
  <div class="Shops_container">
    <div class="top">
      <div class="top-left">
        <svg-icon icon-class="shop" size="1.3em" />
        <div class="shop_name">
          <div>{{ shopName }}</div>
          <div class="after_phone">{{ `客服热线： ${afterPhone || ''}` }}</div>
        </div>
      </div>
      <van-button
        @click="onGoStoreClick"
        class="shop_button"
        color="#E89000"
        round
        block
        text="进入店铺"
      >
      </van-button>
    </div>
    <div class="sell_shop">
      <div v-for="item in goodsList" :key="item.goodsId" class="shopBox">
        <van-image @click="onImageClick(item)" :src="item.goodsImg?.split(',')[0]" />
        <div class="goods_name">
          <van-text-ellipsis
            rows="2"
            :content="`${item.goodsName}  ${item.goodsExpandparamValueList[0]?.expandparamValueName || ''}`"
          />
        </div>
        <div class="goods_price">
          <div>
            ￥
            <span class="price_num">{{ item.goodsSalesPrice }}</span>
          </div>
          <svg-icon @click="onJoinCarClick(item)" icon-class="car" size="1.9em" />
        </div>
      </div>
    </div>
  </div>
  <JoinCar v-model="carPop" :joinCarData="joinCarData"></JoinCar>
</template>

<style scoped lang="scss">
.Shops_container {
  background: white;

  .top {
    width: 100%;
    height: 48px;
    padding: 0 8px;
    display: flex;
    align-items: center;
    justify-content: space-between;

    .top-left {
      height: 100%;
      display: flex;
      align-items: center;

      .shop_name {
        font-size: 14px;
        font-weight: 500;
        margin-left: 8px;
        color: #000;
        display: flex;
        flex-direction: column;

        .after_phone {
          color: #454545;
          font-size: 12px;
          font-weight: 400;
        }
      }
    }

    .shop_button {
      width: 86px;
      height: 24px;
      font-size: 13px;
      font-weight: 400;
    }
  }

  .sell_shop {
    width: 100%;
    background: #f6f6f6;
    display: flex;
    align-items: center;
    justify-content: space-evenly;
    flex-wrap: wrap;

    &:after {
      content: '';
      width: 119px;
      height: 0;
      display: block;
    }

    .shopBox {
      width: 119px;
      height: 189px;
      border-radius: 8px;
      background: #fff;
      margin-top: 4px;

      .van-image {
        width: 100%;
        height: 119px;
      }

      :deep(.van-image__img, .van-image__error, .van-image__loading) {
        border-radius: 8px 8px 0 0;
      }

      .goods_name {
        width: 100%;
        height: 36px;
        padding: 0 8px;
        font-size: 12px;
        font-weight: 500;
        color: #000;
      }

      .goods_price {
        font-size: 10px;
        width: 100%;
        height: 22px;
        padding: 0 8px;
        margin-top: 4px;
        color: #e86600;
        display: flex;
        align-items: center;
        justify-content: space-between;

        .price_num {
          font-size: 14px;
          font-weight: 500;
        }
      }
    }
  }
}
</style>
